<template>
    <view :style="styles" :class="classed">
        <slot />
    </view>
</template>

<script setup lang="ts">
import { useSystemStore } from "@/store";
import { useNamespace } from "@/hooks";

const ns = useNamespace("footer");

const props = defineProps({
    fixed: {
        type: Boolean,
        default: false
    },
    background: {
        type: String,
        default: "white"
    }
});

const styles = computed(() => ({
    background: props.background
}));

const classed = computed(() => ({
    [ns.b()]: true,
    fixed: props.fixed,
    [systemStore.safeAreaBottomClass]: true
}));

const systemStore = useSystemStore();
</script>

<style scoped lang="scss">
@import "./index";
</style>
